<html><!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="../../../../../../g.alicdn.com/kissy/k/1.4.7/seed.js" tppabs="http://g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
    <style>
        body {
            background: #000;
        }

        h1, h2, a {
            color: white;
        }

        #wrap {
            width: 600px;
            margin: 0 auto;
        }

        .container {
            border: 1px solid #555;
        }
    </style>
</head>
<body>

<h1>easing 可视化</h1>

<div id="wrap">

</div>

<script>
    KISSY.use('core,gallery/raphael/1.0/', function (S, _, Raphael) {
        var $ = S.all;
        var easings = [
            [
                "swing"
            ],
            [
                "easeNone",
                "easeIn",
                "easeOut",
                "easeBoth",
                "easeInStrong",
                "easeOutStrong",
                "easeBothStrong"
            ],
            [
                "backIn",
                "backOut",
                "backBoth"],
            [
                "elasticIn",
                "elasticOut",
                "elasticBoth"
            ],
            [
                "bounceIn",
                "bounceOut",
                "bounceBoth"
            ]
        ];

        var steps = 20,
                steps2 = 300,
                width = 600,
                height = 600,
                gap = [0, 0, 100, 250, 0];

        var easingFns = S.Anim.Easing;

        for (var i = 0; i < easings.length; i++) {
            var single = easings[i];
            var container = $("<div class='container'></div>").appendTo("#wrap");
            var h2 = $("<h2></h2>").appendTo(container);
            var div = $("<div></div>").appendTo(container).css({
                width: width,
                height: height + gap[i] * 2
            });

            drawEasing(div[0], width, height, single, gap[i]);

        }

        function drawEasing(container, w, h, easings, gap) {
            var paper = Raphael(container, w, h + gap * 2);

            var x = 0, y = gap - 0;

            var stepX = w / steps, stepY = h / steps, pathGrid = "";

            for (var i = 0; i < steps + 1; i++) {
                pathGrid += ("M" + x + "," + (y + i * stepY) + "l" +
                        w + "," + 0);
                pathGrid += ("M" + (x + i * stepX) + "," + y + "l" +
                        0 + "," + h);
            }

            paper.path(pathGrid).attr({
                stroke: '#555'
            });

            var stepX2 = w / steps2;
            var hue = (Math.random() * 360);

            function nextColour() {
                var colour = 'hsl(' + [hue, 50, 50] + ')';
                hue = (hue + 43) % 360;
                return colour;
            }

            var easingHtml = [];

            for (var j = 0; j < easings.length; j++) {
                var color = nextColour(),
                        path = "";
                easingHtml.push(S.substitute("<span style='color:{color}'>{easing}</span>", {
                    color: Raphael.getRGB(color).hex,
                    easing: easings[j]
                }));
                for (i = 0; i < steps2; i++) {
                    var sx = (stepX2 * i);
                    var sy = (y + easingFns[easings[j]](i / steps2) * h);
                    // if (sy > 1e10) {
                    // backBoth bug
                    // }
                    path += "M" + sx + "," + (-(sy - gap) + gap + h) + "l" + "1,0" + "l" + "0,1" +
                            "l" + "-1,0" + "l" + "0,-1z";
                }
                paper.path(path).attr({
                    stroke: color
                });
            }

            $(container).prev("h2").html(easingHtml.join(" / "));
        }
    });
</script>

</body>
</html>